{% extends 'admin/base.html' %}

{% block title %}导出二维码 - 管理后台{% endblock %}
{% block page_title %}导出二维码{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-download"></i> 导出二维码</h2>
            <a href="{% url 'bike:admin_dashboard' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> 返回仪表盘
            </a>
        </div>

        <!-- 统计信息 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title text-primary">{{ total_bikes }}</h5>
                        <p class="card-text">自行车总数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title text-success">{{ bikes_with_qr }}</h5>
                        <p class="card-text">已有二维码</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title text-warning">{{ bikes_without_qr }}</h5>
                        <p class="card-text">缺少二维码</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                {% if bikes_without_qr > 0 %}
                <div class="alert alert-warning" role="alert">
                    <h4 class="alert-heading">发现 {{ bikes_without_qr }} 辆自行车没有二维码</h4>
                    <p>点击下方按钮为这些自行车批量生成二维码。</p>
                    <hr>
                    <p class="mb-0">二维码生成后，用户可以通过扫描二维码直接查看自行车信息和举报违章。</p>
                </div>

                <div class="d-grid gap-2 d-md-flex justify-content-md-center mt-4">
                    <form method="post" class="d-inline">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="generate">
                        <button type="submit" class="btn btn-success btn-lg">
                            <i class="bi bi-qr-code"></i> 批量生成二维码
                        </button>
                    </form>
                    <a href="{% url 'bike:admin_dashboard' %}" class="btn btn-secondary btn-lg">
                        <i class="bi bi-x-circle"></i> 取消
                    </a>
                </div>

                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-check-circle display-1 text-success"></i>
                    <h4 class="text-muted mt-3">所有自行车都有二维码了！</h4>
                    <p class="text-muted">系统检测到所有自行车都已经生成了二维码。</p>
                    
                    <!-- 导出表单 -->
                    <div class="row justify-content-center mt-4">
                        <div class="col-md-8">
                            <form method="post">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="export">
                                
                                <div class="d-grid gap-2 d-md-flex justify-content-md-center">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="bi bi-download"></i> 下载ZIP文件
                                    </button>
                                    <a href="{% url 'bike:admin_bike_list' %}" class="btn btn-outline-primary btn-lg">
                                        <i class="bi bi-list-ul"></i> 查看自行车列表
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div class="alert alert-info mt-4" role="alert">
                        <h6 class="alert-heading">导出说明</h6>
                        <ul class="mb-0 text-start">
                            <li><strong>ZIP下载</strong>：直接下载ZIP文件到浏览器默认下载位置</li>
                            <li><strong>文件夹结构</strong>：ZIP文件内按学院自动创建文件夹，如：计算机学院/CS001.png</li>
                            <li><strong>文件命名</strong>：文件名格式为 <code>自行车编号.png</code>（如：CS001.png）</li>
                            <li><strong>权限范围</strong>：{% if is_super_admin %}超级管理员可导出所有学院{% else %}学院管理员只能导出本学院{% endif %}的二维码</li>
                        </ul>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 二维码说明 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-info-circle"></i> 二维码功能说明
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>二维码包含信息：</h6>
                        <ul>
                            <li>自行车基本信息</li>
                            <li>所有人联系方式</li>
                            <li>违章举报功能</li>
                            <li>历史违章记录</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>使用方式：</h6>
                        <ul>
                            <li>打印二维码贴纸</li>
                            <li>贴在自行车显眼位置</li>
                            <li>用户扫码查看信息</li>
                            <li>支持在线举报违章</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
